<template>
  <w-table
    :searchInputList="searchInputList"
    :searchToolBtn="searchToolBtn"
    :columns="columns"
    :operation="operation"
    :queryData="getUserListApi"
  />
  <EditAndAdd v-model="visible" v-model:formState="formState" :title="title" />
</template>

<script lang="ts" setup>
import { TableColumnsType } from 'ant-design-vue'
import { getUserListApi } from '@/api/user/index'
import EditAndAdd from './EditAndAdd.vue'
import { FormState } from './types'
import dayjs from 'dayjs'

const visible = ref(false)
const title = ref('新增')
// 弹窗表单数据
const formState = ref<FormState>({
  username: '',
  password: '',
  realname: '',
  sex: '',
  departIds_dictText: '',
  jiaose: '',
  phone: '',
  ruzhiTime: '',
  resignationsTime: '',
  idCard: '',
  address: '',
  email: ''
})

// 表格搜索区域的 输入框列表
const searchInputList = reactive<TableSearchInput[]>([
  {
    key: 'username',
    label: '用户名',
    type: 'input'
  },
  {
    key: 'status',
    label: '用户状态',
    type: 'select',
    list: [
      { label: '正常', value: '1' },
      { label: '禁用', value: '0' }
    ]
  }
])

// 表格搜索区域 额外按钮
const searchToolBtn = ref<TableTools[]>([
  {
    type: 'primary',
    label: '新建用户',
    condition: 'user:add', // 每一个用户都需要配置的权限标识
    handleClick: () => {
      console.log('点击了')
      visible.value = true // 点击新增时显示弹窗
      title.value = '新增'
    }
  }
])

// 表格的列字段 配置
const columns: TableColumnsType = [
  { title: '用户名', width: 100, dataIndex: 'username', key: 'username' },
  { title: '员工姓名', width: 100, dataIndex: 'realname', key: 'realname' },
  { title: '性别', width: 100, dataIndex: 'sex', key: 'sex' },
  { title: '部门', width: 100, dataIndex: 'departIds_dictText', key: 'departIds_dictText' },
  { title: '入职时间', width: 100, dataIndex: 'ruzhiTime', key: 'ruzhiTime' },
  { title: '离职时间', width: 100, dataIndex: 'resignationsTime', key: 'resignationsTime' },
  { title: '手机号码', width: 100, dataIndex: 'phone', key: 'phone' },
  { title: '状态', width: 100, dataIndex: 'status', key: 'status' },
  { title: '家庭住址', width: 100, dataIndex: 'address', key: 'address' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 150
  }
]

// 表格的数据

// const data = [
//   {
//     username: '张哥',
//     realname: 'zhangge',
//     sex: '1',
//     departIds_dictText: '管理部',
//     ruzhiTime: '2023-05-22',
//     resignationsTime: '2023-05-22',
//     phone: '13551363974',
//     status: '1',
//     address: '千锋酒店',
//   },
// ]

// 表格的操作列
const operation = reactive<TableOperation[]>([
  {
    type: 'span',
    label: '编辑',
    handleClick: (record: any) => {
      console.log('编辑', record)
      visible.value = true // 点击编辑时显示弹窗
      title.value = '编辑'
      formState.value = record // 回显 表单数据
      // 重置时间格式为dayjs格式
      formState.value.ruzhiTime = dayjs(record.ruzhiTime, 'YYYY/MM/DD')
      formState.value.resignationsTime = dayjs(record.resignationsTime, 'YYYY/MM/DD')
      console.log(record.ruzhiTime)
    }
  },
  {
    type: 'pop',
    label: '删除',
    message: '确认删除吗？',
    handleClick: (record: any) => {
      console.log('删除', record)
    }
  },
  {
    type: 'pop',
    label: '冻结',
    value: (record:any) => { //  value(record)
      if (record.status === 1) {
        return '冻结'
      } else {
        return '正常'
      }
    },
    handleClick: (record: any) => {
      console.log('冻结', record)
    }
  },
  {
    type: 'switch',
    label: '用户状态',
    handleClick: (record: any) => {
      console.log('用户状态', record)
    }
  }
])
</script>
